<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-button
          class="filter-item fr"
          size="small"
          style="margin-right: 10px; float: right"
          type="primary"
          icon="el-icon-edit"
          @click="showDialog = true"
          >添加</el-button
        >
        <el-table
          :data="list"
          border
          row-key="id"
          style="width: 100%; margin-bottom: 20px"
          default-expand-all
          :tree-props="{ children: 'childs' }"
        >
          <el-table-column prop="title" label="标题">
            <template slot-scope="{ row }">
              <i
                class="menu_icon el-icon-folder-opened"
                v-if="row.pid === null"
              ></i>
              <i class="menu_icon el-icon-document" v-if="row.id === null"></i>
              <i
                class="menu_icon el-icon-document"
                v-if="row.pid !== null && !row.is_point"
              ></i>
              <i class="menu_icon el-icon-view" v-if="row.is_point"></i>
              &nbsp;{{ row.title }}
            </template>
          </el-table-column>
          <el-table-column prop="code" label="权限点代码" />
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="primary" @click="edit(row.id)">编辑</el-button>
              <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 弹框 -->
    <el-dialog
      :title="this.formData.id ? '编辑菜单' : '创建菜单'"
      :visible.sync="showDialog"
      width="width"
      @close="close"
    >
      <el-form
        v-if="showDialog"
        label-width="300px"
        :model="formData"
        :rules="formRules"
        ref="form"
      >
        <el-form-item label="权限组名称" prop="is_point">
          <el-radio-group
            v-model="formData.is_point"
            :disabled="formData.id ? true : false"
          >
            <el-radio :label="false">菜单</el-radio>
            <el-radio :label="true">权限点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select
            placeholder="主导航"
            v-model="formData.pid"
            @focus="getData"
          >
            <el-option
              v-for="(item, index) in array"
              :key="index"
              value-key
              :value="item.id"
              :label="item.title"
              :disabled="item.native === 1 && formData.is_point"
            >
              <!-- 过滤器 -->
              {{ item | filTitle }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" style="width: 500px" prop="code">
          <el-input v-model="formData.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" style="width: 500px" prop="title">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMenusListApi,
  editMenusApi,
  delMenusApi,
  addMenusApi,
  getMenusInfoApi,
} from "@/api/menus";
// import { tranListToTreeData } from "@/utils/index";

export default {
  name: "menus",
  data() {
    return {
      list: [],
      showDialog: false,
      radio: 1,
      array: [
        {
          // 最高层
          id: null,
          code: "",
          title: "主导航",
        },
      ],
      native: 1,
      queryData: {
        title: "", // 菜单标题
        code: "", // 菜单代码
        is_point: "", // 是否权限点
        pid: "", // 父id
      },

      formData: {
        is_point: false,
        pid: "",
        code: "",
        title: "",
      },
      formRules: {
        code: [{ required: true, message: "请输入权限代码", trigger: "blur" }],
        title: [{ required: true, message: "请选择标题", trigger: "blur" }],
      },
    };
  },
  created() {
    this.initData();
    this.getData();
  },
  methods: {
    async initData() {
      let res = await getMenusListApi();
      // this.list = tranListToTreeData(res, null);
      this.list = res.map((item) => {
        if (item.childs) {
          item.childs.forEach((child) => {
            if (child.points) {
              child.childs = child.points;
            }
          });
        }
        // console.log(item);
        return item;
      });

      console.log(this.list);
    },

    async getData() {
      this.array = [];
      let res = JSON.stringify(await getMenusListApi());
      console.log(res);
      const arr = JSON.parse(res.replace("points", "childs"));
      // console.log(arr);
      // let aaa = JSON.stringify(arr);
      // console.log(aaa);
      // this.$nextTick(function () {
      this.tranListToTreeData(arr);
      // });
    },

    tranListToTreeData(res) {
      // 递归
      res.forEach((item) => {
        if (item.pid === null) {
          // 1级
          this.native = 1;
        }
        item.native = this.native;
        this.array.push(item);
        if (item.childs && item.childs.length > 0) {
          this.native++;
          this.tranListToTreeData(item.childs);
          // this.array.push(item);
        }
      });
    },

    // 新增
    async btnOK() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        await editMenusApi(this.formData);
      } else {
        await addMenusApi(this.formData);
      }

      this.$message.success("操作成功");
      this.showDialog = false;
      this.initData();
    },

    async edit(id) {
      let res = await getMenusInfoApi(id);
      this.formData = res;
      this.showDialog = true;
    },
    async del(id) {
      try {
        await this.$confirm("确定要删除该数据吗");
        await delMenusApi(id);
        this.initData();
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
      }
    },

    close() {
      this.formData = {};
      this.showDialog = false;
    },
  },

  // 过滤器
  filters: {
    filTitle(val) {
      let str = "";
      for (let index = val.native; index > 0; index--) {
        str += "　";
      }
      return str + val.title;
    },
  },
};
</script>

<style>
.el-icon-arrow-right:before {
  display: none;
}
</style>